<template>
  <div class="show-image-canvas">
    <el-scrollbar>
      <canvas v-if="img" ref="showPdfCanvas" class="canvas-center"></canvas>
      <el-empty v-else description="暂无数据" class="ElEmpty" />
    </el-scrollbar>

  </div>
</template>

<script setup lang='ts'>
import { reactive, ref, onBeforeMount, onMounted } from 'vue'
const showPdfCanvas = ref()
const props = defineProps({
  img: {
    type: String,
    default: ''
  },
  imgObj: {
    type: Object as any,
    default: () => { }
  },
  recordList: {
    type: Array,
    default: () => []
  },
  type: {
    type: String,
    default: 'R'
  }
})
let canvasData = reactive({
  canvas: null as any,
  pointerDownLocation: {} as any,
  dragging: false,
  ctx: null as any,
  imgData: null as any,
  t_PointerMove: false,
  rubberBandRect: {} as any,
  rectList: [] as any,
  historyList: [] as any,
  isClickBack: false,
  initImg: null as any,
  imageObj: null as any,
  src: ''

})
const initImage = () => {
  canvasData.canvas = showPdfCanvas.value
  canvasData.ctx = canvasData.canvas.getContext('2d')
  canvasData.ctx.save()
  canvasData.ctx.scale(0.5, 0.5)
  const image = new Image()
  image.setAttribute('crossOrigin', 'anonymous')
  image.src = props.img
  image.addEventListener('load', () => {
    // 图片加载完，再draw 和 toDataURL
    console.log(image.width, image.height, '650', 650 / image.width) // 2481 3508
    const canvasHeight = Math.ceil(image.height * (794 / image.width))
    if (image.complete) {
      
      // A4 横向 width 794  height 1123 纵向 width 1123 height 794 ---> 修改一哈数据 width --->794--? heigth 1123 -- 875
      // 数学嘛  w:h 定宽 高自适应 
      canvasData.canvas.width = 794
      canvasData.canvas.height = canvasHeight//Math.floor(794*image.height/image.width)
      canvasData.imageObj = image
      canvasData.ctx.drawImage(image, 0, 0, 794, canvasHeight)
      canvasData.ctx.globalCompositeOperation = 'R' // 干嘛的
      const imgData = canvasData.canvas.toDataURL()
      canvasData.initImg = canvasData.canvas.toDataURL()
      canvasData.historyList.push({ img: imgData, width: canvasData.canvas.width, height: canvasData.canvas.height, top: 0, left: 0 })
      console.log('11111',(props.imgObj));
      if (props.imgObj.commentsDTOs) {
        addHistoryList(props.imgObj.commentsDTOs)
      }
    }
  })
}
// 添加历史标注
const addHistoryList = (list) => {
  if (!(Array.isArray(list) && list.length > 0)) {
    return
  }
  console.log(list.length, list, 'length')
  for (let i = 0; i < list.length; i++) {
    // console.log(list[i], '噢噢噢噢')
    // // console.log(list[i], '我iii')
    const e = list[i]
    const [item] = e
    if (!item) continue
    const loca = {
      left: Number(item.distLeft),
      top: Number(item.distTop),
      width: Number(item.width),
      height: Number(item.height)
    }
    // 这个地方就是 把react 画出来的具体操作
    addDrawShape(loca) // 矩形
    addDrawTxt(loca) // 编号
    // this.addDrawCloseTxt(loca) // 关闭
    recordHisy(loca) // 历史记录
  }
}
const addDrawShape = (location) => {
  const ctx = canvasData.ctx
  ctx.save()
  ctx.beginPath()
  ctx.strokeStyle = 'red'
  ctx.rect(location.left, location.top, location.width, location.height)
  ctx.stroke()
  ctx.closePath()
  ctx.restore()
}
const addDrawTxt = (location) => {
  const ctx = canvasData.ctx
  ctx.save()
  ctx.fillStyle = 'red'
  const index = canvasData.historyList.length
  ctx.fillText(index, location.left, location.top - 6)
  ctx.save()
}
// 历史记录保存
const recordHisy = (loca) => {
  // console.log(loca, 'llloc')
  canvasData.isClickBack = true
  const imgData = canvasData.canvas.toDataURL()
  // 就是history 多了一个数据 怎么处理的 请问删除
  // console.log(canvasData.historyList)
  canvasData.historyList.push({ img: imgData, width: loca.width, height: loca.height, top: loca.top, left: loca.left })
}
const clearCanvasDate = () => {
  canvasData = {
    canvas: null as any,
    src: '',
    pointerDownLocation: {} as any,
    dragging: false,
    ctx: null as any,
    imgData: null as any,
    t_PointerMove: false,
    rubberBandRect: {} as any,
    rectList: [] as any,
    historyList: [] as any,
    isClickBack: false,
    initImg: null as any,
    imageObj: null as any,
  }
}
defineExpose({
  initImage, clearCanvasDate
})
</script>
<style scoped lang='scss'>
.show-image-canvas {
  height: 100%;
  width: 100%;

  .canvas-center {
    // margin: 0 auto;
    margin-left: 10px;
  }

  .ElEmpty {
    width: 400px;
    margin: 0 auto;
    margin-top: 200px;
  }
}
</style>